<template>
  <div>
    <nav-bar title="在岗巡查"></nav-bar>
    <div class="maxinBox">
      <div class="backgroundfff" v-if="teamReport">
        <van-cell required title="巡查时间" @click="show = true" is-link :value="date" />
        <van-popup v-model="show" position="bottom" style="height: 40%">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            @confirm="onConfirm"
            @cancel="show = false"
            title="请选择生效日期"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
        <van-row>
          <van-col :span="24" class="title">
            <div>
              出勤人员一览
            </div>
          </van-col>
        </van-row>
        <van-cell title="今日出勤(人)" :value="teamReport.entryCount || 0" :icon="entryCount" />
        <van-cell title="位置签到(人)" :value="teamReport.checkInCount || 0" :icon="checkInCount" />
        <van-cell title="未签到(人)" @click="noSignIn" is-link :value="teamReport.unCheckInCount || 0" :icon="unCheckInCount" />
        <van-row>
          <van-col :span="24" class="title">
            <div>
              区域人数统计
            </div>
          </van-col>
        </van-row>
        <van-row class="team" v-for="(item, index) in teamReport.regionList" :key="index">
          <van-col :span="5">
            <img style="width: 80%" :src="item.qrCodeUrl" alt="" @click="bigAvatar(item.qrCodeUrl)">
          </van-col>
          <van-col :span="17" @click="teamDetails(item)">
            <van-row>
              <van-col :span="15">
                <div style="color: #666;" class="fontSize16">{{item.checkPointName || '--'}}</div>
                <div style="color: #666;" class="fontSize14">{{item.checkPointLocation || '--'}}</div>
                <div style="color: #666;" class="fontSize14">{{item.abnormalCount || 0}}人异常</div>
              </van-col>
              <van-col :span="9">
                <div style="color: #666;line-height: 4rem;color: #225FBA;text-align: right;" class="fontSize14">
                  {{item.checkInCount}}人签到
                </div>
              </van-col>
            </van-row>
          </van-col>
          <van-col :span="2" style="text-align: right;line-height: 4rem;font-size: 1.5rem;">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </div>
    </div>

  </div>
</template>

<script>
  import entryCount from '../../../assets/images/entryCount.png'
  import checkInCount from '../../../assets/images/checkInCount.png'
  import unCheckInCount from '../../../assets/images/unCheckInCount.png'
  import {ImagePreview} from 'vant'
  import moment from 'moment'
  import teamAPI from '../../../api/workAPI/teamAPI.js'
  export default {
    data() {
      return {
        currentDate: new Date(),
        entryCount: entryCount,
        checkInCount: checkInCount,
        unCheckInCount: unCheckInCount,
        show: false,
        date: moment(new Date()).format('YYYY-MM-DD'),
        minDate: new Date(2015, 0, 1),
        maxDate: new Date(),
        teamReport: null
      }
    },
    methods: {
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
      noSignIn() {
        this.$router.push({
          name: 'NotSignIn'
        })
      },
      teamDetails(data) {
        localStorage.setItem('teamDate', this.date)
        localStorage.setItem('teamDetails', JSON.stringify(data))
        this.$router.push({
          name: 'AreaAttendance'
        })
      },
      getTeamList() {
        let projectId = localStorage.getItem('projectId')
        teamAPI.getReport(projectId, this.date).then(res => {
          this.teamReport = res
        })
      },
      onConfirm(date) {
        this.show = false;
        this.date = moment(date).format('YYYY-MM-DD')
        this.getTeamList()
      },
    },
    mounted() {
      this.getTeamList()
    }
  }
</script>
<style scoped lang="scss">
  .title{
      padding: 0.625rem;
      font-size: 0.875rem;
      div{
        margin: 0.3125rem;
        border-left: 0.125rem solid #1577FF;
        padding-left: 0.3125rem;
      }
    }
    .team{
        padding: 0.9375rem;
        font-size: 0.875rem;
        border-bottom: 0.0625rem solid #E5E5E5;
        .van-col--7{
          img{
            width: 100%;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
</style>
